import React from 'react'

import '@/assets/css/collect.css'
import { HeartFill } from 'antd-mobile-icons'

const Collect = () => {

    const back = () => {
        React.navigate(-1)
    }
    let [page, SetPage] = React.useState(1)
    let [hasMore, SethasMore] = React.useState(true)
    let ref = React.useRef(null)
    let [collect, SetCollect] = React.useState([])

    React.useEffect(() => {
        CollectData()
    },[])

    // 下拉刷新
    const onRefresh = async () => {
        SetPage(1)
        SetCollect([])
        SethasMore(true)
        CollectData()
    }

    // 上拉加载
    const loadMore = async () => {
        CollectData()
    }

    // 请求数据
    const CollectData = async () => {
        var result = await React.HTTP.post('/collect/index',{busid: React.Business.id, page: page})

        if(result.code == 0){
            SethasMore(false)
            return false
        }else{
            SetPage(page + 1)
            SetCollect(collect.concat(result.data))
        }
    }

    return (
        <>
            <React.UI.NavBar back='返回' onBack={back}>
                我的收藏
            </React.UI.NavBar>

            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="collectlist">
                    {collect.map((item: any, key) => (
                        <div className="item" key={key} onClick={() => React.navigate(`/room/info?rid=${item.room.id}`)}>
                            
                            <div className="collect">
                                <HeartFill color='var(--adm-color-danger)' fontSize={36} />
                            </div>
                            <div className="images">
                                <div className="swipers">
                                    <React.UI.Image src={item.room.thumb_text} />
                                </div>
                                <div className="title">{item.room.name}</div>
                            </div>
                            <div>
                                <div className="item_bot">
                                    <div className="font">
                                        <span className="price">￥{item.room.price}/晚</span>
                                    </div>
                                    <div className="item_tips">{item.createtime_text}</div>
                                </div>
                            </div>
                            
                        </div>
                    ))}
                    
                </div>
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />
            </React.UI.PullToRefresh>

           
        </>
    )
}

export default Collect;